<!DOCTYPE html>
<html lang="en">

<head>
    <!--余枭春-->
    <meta charset="UTF-8">
    <title>添加试卷基本信息</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/popper.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.js"></script>
</head>

<body>

<div id="app" class="container" style="padding: 100px 100px 10px;">
    <div class="input-group">
        <div class="col-sm-6">
            <div class="input-group">
                <div class="col-sm-1">
                    <div style="border: 1px #0060ff solid;border-radius: 50%;width: 30px;height: 30px;text-align: center; color: white;background-color: #0060ff;">
                        <h4>1</h4>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5>基本信息</h5>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="input-group">
                <div class="col-sm-1">
                    <div style="border: 1px lightgray solid;border-radius: 50%;width: 30px;height: 30px;text-align: center; color: lightgray;">
                        <h4>2</h4>
                    </div>
                </div>
                <div class="col-sm-4" style="color: lightgray;">
                    <h5>试卷题目</h5>
                </div>
            </div>
        </div>
    </div>

    <div style="margin-top:50px;margin-bottom: 50px;"></div>
    <!-- <form class="bs-example bs-example-form" role="form"> -->
    <div class="input-group" style="margin-top: 10px;align-items:center;">
        <div class="col-sm-2">
            <span class="input-group-addon"><span style="color: red;">*</span> 试卷名称：</span>
        </div>
        <div class="col-sm-6">
            <input class="form-control" v-model="name" @blur="nameValue()">
        </div>
    </div>
    <div id="paperNameDiv" class="col-sm-8" style="margin-top: 10px;display: none;">
        <div class="alert alert-danger" style="text-align: center;">
            请设置试卷名
        </div>
    </div>

    <div class="input-group" style="margin-top: 20px;align-items:center;">
        <div class="col-sm-2">
            <span class="input-group-addon "><span style="color: red; ">*</span>&nbsp;试卷分类：</span>
        </div>
        <div class="col-sm-6 ">
            <select v-model="paperClassificationId" class="form-control">
                <option value="">请选则试卷分类</option>
                <option v-for="classification in classifications" :value="classification.id">{{classification.name}}
                </option>
            </select>
        </div>
    </div>
    <div class="input-group" style="margin-top:10px;align-items:center;">
        <div class="col-sm-2">
            <span class="input-group-addon"><span style="color: red;">*</span>&nbsp;试卷类型：</span>
        </div>
        <div class="col-sm-6 ">
            <input type="radio" name="testType" value="1" v-model="testType"> 模拟试卷&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="testType" value="2" v-model="testType"> 测评试卷&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="testType" value="3" v-model="testType"> 其他
        </div>
    </div>
    <div class="input-group" style="margin-top: 10px;align-items:center; ">
        <div class="col-sm-2">
            <span class="input-group-addon"><span style="color: red;">&nbsp;&nbsp;</span>&nbsp;答题时长：</span>
        </div>
        <div class="col-sm-5">
            <input class="form-control" type="number" v-model="time" @blur="keepTime()">
        </div>
        <div class="col-sm-2">
            <span class="input-group-addon ">&nbsp;分钟</span>
        </div>
    </div>
    <div class="input-group" style="margin-top: 10px;align-items:center;">
        <div class="col-sm-2">
            <span class="input-group-addon"><span
                    style="color: red;">*</span>&nbsp;&nbsp;及&nbsp;&nbsp;格&nbsp;&nbsp;线：</span>
        </div>
        <div class="col-sm-6">
            <input class="form-control" type="number" v-model="borderline" @blur="keepBorderline()">
        </div>
    </div>
    <div style="margin-top: 50px;" class="col-sm-8">
        <button class="btn btn-primary btn-lg btn-block" @click="nextStep()">下一步</button>
    </div>
    <!-- </form> -->
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            classifications: [],
            paperClassificationId: "",
            name: "",
            testType: "1",
            time: "120",
            borderline: "60",
            token: "",
            refreshToken: "",
            paperId: "",
            storage: undefined
        },
        mounted() {
            this.storage = window.localStorage;
            this.token = this.storage.getItem("token");
            this.refreshToken = this.storage.getItem("refreshToken");
            axios.get("/exam/paperClassification/all", {
                headers: {
                    "Content-Type": "application/json;charset=utf8",
                    "token": this.token,
                    "refreshToken": this.refreshToken
                }
            }).then(res => {
                console.log(res);
                this.classifications = res.data.data;
            });
            this.paperId == window.location.href.split("=")[1];
            console.info(this.paperId);
            if (this.paperId != "" || this.paperId.length != 0) {
                this.token = this.storage.getItem("token");
                this.refreshToken = this.storage.getItem("refreshToken");
                axios.get("/exam/paper/find/" + this.paperId, {
                    headers: {
                        "Content-Type": "application/json;charset=utf8",
                        "token": this.token,
                        "refreshToken": this.refreshToken
                    }
                }).then(res => {
                    if (res.data != null) {
                        var paper = res.data.data;
                        this.name = paper.name;
                        this.testType = paper.testType;
                        this.time = paper.time;
                        this.paperClassificationId = paper.classificationId;
                        this.borderline = paper.borderline;
                    }
                })
            }
        },
        methods: {
            nextStep: function () {
                if (this.name == "") {
                    $("#paperNameDiv").prop("style", "display:block");
                    return;
                }
                this.token = this.storage.getItem("token");
                this.refreshToken = this.storage.getItem("refreshToken");
                axios.post("/exam/paper/create", {
                    "id": this.paperId,
                    "name": this.name,
                    "testType": this.testType,
                    "classificationId": this.paperClassificationId,
                    "time": this.time,
                    "borderline": this.borderline
                }, {
                    headers: {
                        "Content-Type": "application/json;charset=utf8",
                        "token": this.token,
                        "refreshToken": this.refreshToken
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        console.log(res.data.data);
                        //window.localStorage.setItem("paperId", res.data.data);
                        let url = "./addPaper_2.html?paperId=" + res.data.data;
                        //页面跳转
                        window.location.href = url;
                    }
                    if (res.data.code == 500) {
                        //TODO  弹出框
                        alert(" 系统出现错误，请稍后在访问")

                    }
                })
            },
            nameValue: function () {
                if (this.name == "") {
                    $("#paperNameDiv").prop("style", "display:block");
                } else {
                    $("#paperNameDiv").prop("style", "display:none");
                }
            },
            keepBorderline: function () {
                var borderline_1 = this.borderline;
                if (borderline_1 < 0) {
                    this.borderline = -borderline_1;
                }
                if (borderline_1 == 0) {
                    this.borderline = 60;
                }
                if ((borderline_1 % 1) > 0) {
                    this.borderline = borderline_1 - borderline_1 % 1;
                }
            },
            keepTime: function () {
                var time_1 = this.time;
                if (time_1 < 0) {
                    this.time = -time_1;
                }
                if (time_1 == 0) {
                    this.time = 120;
                }
                if ((time_1 % 1) > 0 | (time_1 % 5) > 0) {
                    this.time = time_1 - time_1 % 1;
                    this.time = time_1 - time_1 % 5;
                }
            }
        }


    })
</script>
</body>

</html>